function Sort(option) {
    if (!option || typeof option != "object" || typeof option.el != "object" || !option.itemArr) {
        throw Error(`Parameter error`);
    };
    this.option = option;
    this.el = option.el;
    this.itemHeight = option.height || 24;
    this.oftp = this.el.offsetTop;
    this.lock = 2;
    this.items = new Array();
    this.textArr = new Array();
    this.initElements();
}
Sort.prototype.version = "1.0.0";
Sort.prototype.start = function() {
    this.initEvent();
}
Sort.prototype.stop = function() {
    this.removeEvent();
}
Sort.prototype.removeEvent = function() {
    for (var i = 0; i < this.items.length; i++) {
        this.items[i].onmousedown = null;
    }
    document.onmousedown = null;
    document.onmouseup = null;
    document.onmousemove = null;
}
Sort.prototype.initElements = function() {
    for (var i = 0; i < this.option.itemArr.length; i++) {
        var span = document.createElement("span");
        span.innerHTML = this.option.itemArr[i];
        this.items.push(span);
        this.el.appendChild(span);
    }
    this.el.style.height = `${this.items.length * this.itemHeight}px`;
}
Sort.prototype.initEvent = function () {
    this.bindMouseDown();
}
Sort.prototype.bindMouseDown = function () {
    var $this = this;
    for (var i = 0; i < this.items.length; i++) {
        this.items[i].index = i;
        this.textArr.push(this.items[i].innerText || this.items[i].innerHTML);
        this.items[i].onmousedown = function (e) {
            if ($this.lock == 2) {
                $this.lock = 1;
                var $ = this;
                $this._ = e.offsetY;
                this.style = "pointer-events: none; opacity: 0; visibility: hidden;";
                $this.span = $this.createElement(this);
                $this.index_1 = this.index;
                document.onmousemove = function (e) {
                    var Y = e.pageY - $this.oftp - $this._;
                    $this.span.style.transform = `translate3d(0,${e.pageY - $this.oftp - $this._ - $.offsetTop}px,0)`;
                    $this.index_2 = parseInt(Y / $this.itemHeight);
                    $this.index_2 = $this.index_2 > $this.items.length - 1 ? $this.items.length - 1 : $this.index_2;
                    $this.index_2 = $this.index_2 < 0 ? 0 : $this.index_2;
                    for (var i = 0; i < $this.index_1; i++) {
                        if (Y > $this.items[i].offsetTop + 15) {
                            $this.items[i].style.transitionProperty = "transform";
                            $this.items[i].style.transitionDuration = "300ms";
                            $this.items[i].style.transform = `translate3d(0,0px,0)`;
                        }
                        if (Y < $this.items[i].offsetTop + 15) {
                            $this.items[i].style.transitionProperty = "transform";
                            $this.items[i].style.transitionDuration = "300ms";
                            $this.items[i].style.transform = `translate3d(0,${$this.itemHeight}px,0)`;
                        }
                    }
                    for (var i = $this.index_1; i < $this.items.length; i++) {
                        if (Y > $this.items[i].offsetTop - 9) {
                            $this.items[i].style.transitionProperty = "transform";
                            $this.items[i].style.transitionDuration = "300ms";
                            $this.items[i].style.transform = `translate3d(0,-${$this.itemHeight}px,0)`;
                        }
                        if (Y < $this.items[i].offsetTop - 9) {
                            $this.items[i].style.transitionProperty = "transform";
                            $this.items[i].style.transitionDuration = "300ms";
                            $this.items[i].style.transform = `translate3d(0,0px,0)`;
                        }
                    }
                }
                $this.detachDocumentEvent();
            }
        }
    }
}
Sort.prototype.createElement = function (el) {
    var span = document.createElement("span");
    span.innerText = el.innerHTML;
    span.style = `
        width: 80px;
        height: 24px;
        line-height: 24px;
        position: fixed;
        top: ${parseInt(el.offsetTop) + this.oftp}px;
        left: ${this.el.offsetLeft - 0.5}px;
        text-align: center;
    `;
    document.body.append(span);
    return span;
}
Sort.prototype.detachDocumentEvent = function () {
    var $this = this;
    document.onmouseup = function (e) {
        if ($this.lock == 1) {
            $this.lock = 0;
            var Y = e.pageY - $this.oftp - $this._;
            var indexs = parseInt(Y / $this.itemHeight);
            indexs = indexs > $this.items.length - 1 ? $this.items.length - 1 : indexs;
            indexs = indexs < 0 ? 0 : indexs;
            $this.span.style.transition = `transform .3s`;
            if (indexs != $this.items.length - 1) {
                if (Y > ((indexs + 1) * 24) - 9) {
                    indexs++;
                }
            }
            $this.span.style.transform = `translate3d(0,${(indexs - $this.index_1) * $this.itemHeight}px,0)`;
            setTimeout(callback, 300);
            function callback() {
                $this.span.remove();
                if ($this.index_1 < indexs) {
                    for (var n = $this.index_1; n < indexs; n++) {
                        var c = $this.textArr[n];
                        $this.textArr[n] = $this.textArr[n + 1];
                        $this.textArr[n + 1] = c;
                    }
                } else {
                    for (var n = $this.index_1; n > indexs; n--) {
                        var c = $this.textArr[n];
                        $this.textArr[n] = $this.textArr[n - 1];
                        $this.textArr[n - 1] = c;
                    }
                }
                for (var i = 0; i < $this.items.length; i++) {
                    $this.items[i].innerHTML = $this.textArr[i];
                    $this.items[i].style = "";
                }
                $this.lock = 2;
            }
        }
        document.onmousemove = null;
    }
}